<li>
    <span class="item-hd">退款类型{Common::get_help_icon('product_refund_restriction_type')}：</span>
    <div class="item-bd">
        <label class="radio-label">
            <input type="radio" name="refund_restriction" value="0" {if empty($info['refund_restriction'])}checked="checked"{/if} />无条件退款
        </label>
        <label class="radio-label ml-20">
            <input type="radio" name="refund_restriction" value="1" {if $info['refund_restriction']=='1'}checked="checked"{/if} />不可退改
        </label>
        <label class="radio-label ml-20">
            <input type="radio" name="refund_restriction" value="2" {if $info['refund_restriction']=='2'}checked="checked"{/if} />有条件退改
        </label>
    </div>
</li>
<li id="refund_rule_content" style="{if $info['refund_restriction']!='2'}display: none{/if}">
    <span class="item-hd">退款规则：</span>
    <div class="item-bd">
        <table class="table table-border table-bordered table-bg table-order w800">
            <thead>
            <tr class="text-c">
                <th><span class="c-999">设置退款时间</span></th>
                <th><span class="c-999">退款手续费</span></th>
                <th><span class="c-999">操作</span></th>
            </tr>
            </thead>
            <tbody id="refund_rule_con">
                {if empty($refund_rule)}
                <tr class="text-c">
                    <td>
                        <input type="hidden" name="refund_rule_id[]" value="" />
                        <span class="c-666">用户提前 </span>
                        <input type="number" name="refund_before_day[]" min="0" class="input-text w50 text-c" value="0"/>
                        <span class="c-666"> 天</span>
                        <input type="text" name="refund_before_date[]" readonly class="input-text w80 refund_before_date" value="00:00"/>
                        <span class="c-666">点前申请退款</span>
                    </td>
                    <td>
                        <span class="c-666">扣</span>
                        <input type="number" name="refund_deduct_price[]" min="0" class="input-text w80 text-c" value="" placeholder="两位小数"/>
                        <span class="select-box w50">
                            <select class="select" name="refund_deduct_price_type[]">
                                <option value="1">%</option>
                                <option value="2">元</option>
                            </select>
                        </span>
                    </td>
                    <td>
                        <a href="javascript:;" class="btn-link mr-10 add_refund_rule" title="添加">添加</a>
                    </td>
                </tr>
                {else}
                {loop $refund_rule $rule_key $rule}
                <tr class="text-c">
                    <td>
                        <input type="hidden" name="refund_rule_id[]" value="{$rule['id']}" />
                        <span class="c-666">用户提前 </span>
                        <input type="number" name="refund_before_day[]" min="0" class="input-text w50 text-c" value="{$rule['before_day']}"/>
                        <span class="c-666"> 天</span>
                        <input type="text" name="refund_before_date[]" readonly class="input-text w80 refund_before_date" value="{$rule['before_date']}"/>
                        <span class="c-666">点前申请退款</span>
                    </td>
                    <td>
                        <span class="c-666">扣</span>
                        <input type="number" name="refund_deduct_price[]" min="0" class="input-text w80 text-c" value="{$rule['fee']}" placeholder="两位小数"/>
                        <span class="select-box w50">
                            <select class="select" name="refund_deduct_price_type[]">
                                <option {if $rule['fee_type'] == 1}selected{/if} value="1">%</option>
                                <option {if $rule['fee_type'] == 2}selected{/if} value="2">元</option>
                            </select>
                        </span>
                    </td>
                    <td>
                        {if $rule_key == 0}
                        <a href="javascript:;" class="btn-link mr-10 add_refund_rule" title="添加">添加</a>
                        {else}
                        <a href="javascript:;" class="btn-link mr-10 del_refund_rule" title="删除">删除</a>
                        {/if}
                    </td>
                </tr>
                {/loop}
                {/if}
            </tbody>
        </table>
    </div>
</li>
<script type="text/html" id="refund_rule_template">
    <tr class="text-c">
        <td>
            <input type="hidden" name="refund_rule_id[]" value="" />
            <span class="c-666">用户提前 </span>
            <input type="number" name="refund_before_day[]" min="0" class="input-text w50 text-c" value="0"/>
            <span class="c-666"> 天</span>
            <input type="text" name="refund_before_date[]" readonly class="input-text w80 refund_before_date" value="00:00"/>
            <span class="c-666">点前申请退款</span>
        </td>
        <td>
            <span class="c-666">扣</span>
            <input type="number" name="refund_deduct_price[]" min="0" class="input-text w80 text-c" value="" placeholder="两位小数"/>
            <span class="select-box w50">
                <select class="select" name="refund_deduct_price_type[]">
                    <option value="1">%</option>
                    <option value="2">元</option>
                </select>
            </span>
        </td>
        <td>
            <a href="javascript:;" class="btn-link c-red mr-10 del_refund_rule" title="编辑">删除</a>
        </td>
    </tr>
</script>
{Common::getScript("laydate/laydate.js")}
<script type="text/javascript">
    $(function(){
        laydate.render({
            elem: '.refund_before_date',
            type: "time",
            format: "HH:mm"
        });

        // 切换退款类型时为有条件退改时显示退款规则
        $('input[name="refund_restriction"]').change(function(){
            if($(this).val() == 2){
                $('#refund_rule_content').show();
            }else{
                $('#refund_rule_content').hide();
            }
        })

        $('.add_refund_rule').click(function(){
            var newRule = $('#refund_rule_template').html();
            $('#refund_rule_con').append(newRule);

            // 重新绑定laydate事件给新添加的元素
            $('#refund_rule_con').find('.refund_before_date:last').each(function() {
                laydate.render({
                    elem: this,
                    type: "time",
                    format: "HH:mm"
                });
            });
        })

        // 初始化产品规则
        var refund_rule_init = {
            options: [
                {
                    types: 'click',
                    selector: '.del_refund_rule',
                    fn: function () {
                        $(this).parent().parent().remove();
                    }
                },
                {
                    // 切换手续费类型时判断手续费输入值，百分比不能大于百分之百
                    types: 'change',
                    selector: 'select[name="refund_deduct_price_type[]"]',
                    fn: function () {
                        var val = $(this).val(),
                            price_obj = $(this).parent().parent().find('input[name="refund_deduct_price[]"]'),
                            price = price_obj.val();
                        if (val == 1) {
                            if (price > 100) {
                                price_obj.val(100);
                            }
                        }
                    }
                },
                {
                    // 退款手续费输入时判断手续费输入值，百分比不能大于百分之百，输入值需要大于零
                    types: 'keyup',
                    selector: 'input[name="refund_deduct_price[]"]',
                    fn: function () {
                        var val = $(this).val(),
                            price_type_obj = $(this).parent().parent().find('select[name="refund_deduct_price_type[]"]'),
                            price_type = price_type_obj.val();

                        // 判断是否是正确的数字，不是正确的数字将值处理为正确数字或置为0
                        if (!/^[0-9]+(\.[0-9]{1,2})?$/.test(val) && val != 0) {
                            $(this).val(0);
                        }

                        if (price_type == 1) {
                            if (val > 100) {
                                $(this).val(100);
                            }
                        }
                        if (val < 0) {
                            $(this).val(0);
                        }
                    }
                },
                {
                    // 天数输入的时候判断输入值，必须为大于等于零的整数
                    types: 'blur',
                    selector: 'input[name="refund_before_day[]"]',
                    fn: function () {
                        var val = $(this).val();
                        if (val < 0) {
                            $(this).val(0);
                        }

                        if (!/^[1-9][0-9]*$/.test(val)) {
                            $(this).val(0);
                        }
                    }
                }
            ],
            start: function () {
                $.each(refund_rule_init.options, function (index, item) {
                    $('#refund_rule_con').on(item.types, item.selector, item.fn)
                })
            }
        }

        refund_rule_init.start()

    })
</script>